<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMC实验管理平台 - 工作流模板管理</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- JS-YAML -->
    <script src="https://unpkg.com/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        #app {
            min-height: 100vh;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 500;
        }
        .header p {
            margin: 5px 0 0 0;
            opacity: 0.9;
            font-size: 14px;
        }
        .nav-menu {
            background-color: white;
            padding: 0 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .main-container {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        .toolbar {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        .template-list {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .yaml-editor {
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .version-item {
            padding: 15px;
            border-bottom: 1px solid #ebeef5;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .version-item:hover {
            background-color: #f5f7fa;
        }
        .version-item.active {
            background-color: #ecf5ff;
            border-left: 3px solid #409EFF;
        }
        .diff-container {
            font-family: 'Courier New', monospace;
            font-size: 13px;
            white-space: pre-wrap;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            max-height: 500px;
            overflow-y: auto;
        }
        .diff-add {
            background-color: #e6ffed;
            color: #22863a;
        }
        .diff-remove {
            background-color: #ffeef0;
            color: #b31d28;
        }
        .tag-item {
            margin: 2px 4px 2px 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 页面头部 -->
        <div class="header">
            <h1>BMC实验管理平台</h1>
            <p>工作流模板管理 - 创建、复用和管理工作流模板</p>
        </div>

        <!-- 导航菜单 -->
        <div class="nav-menu">
            <el-menu mode="horizontal" :default-active="activeMenu" @select="handleMenuSelect">
                <el-menu-item index="templates">实验模板</el-menu-item>
                <el-menu-item index="workflows">工作流</el-menu-item>
                <el-menu-item index="workflow-templates">工作流模板</el-menu-item>
            </el-menu>
        </div>

        <!-- 主内容区域 -->
        <div class="main-container">
            <!-- 工具栏 -->
            <div class="toolbar">
                <el-row :gutter="20" type="flex" justify="space-between" align="middle">
                    <el-col :span="16">
                        <el-space wrap>
                            <el-button type="primary" icon="Plus" @click="showCreateDialog">
                                创建模板
                            </el-button>
                            <el-input
                                v-model="searchQuery.name"
                                placeholder="搜索模板名称"
                                clearable
                                style="width: 250px"
                                @clear="loadTemplates"
                                @keyup.enter="loadTemplates">
                                <template #prefix>
                                    <el-icon><Search /></el-icon>
                                </template>
                            </el-input>
                            <el-button icon="Search" @click="loadTemplates">搜索</el-button>
                            <el-button icon="Refresh" @click="resetAndLoad">重置</el-button>
                        </el-space>
                    </el-col>
                    <el-col :span="8" style="text-align: right;">
                        <el-space>
                            <span style="color: #909399; font-size: 14px;">
                                共 {{ total }} 个模板
                            </span>
                        </el-space>
                    </el-col>
                </el-row>
            </div>

            <!-- 模板列表 -->
            <div class="template-list">
                <el-table
                    :data="templates"
                    v-loading="loading"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80" align="center" />
                    <el-table-column prop="name" label="模板名称" min-width="200" show-overflow-tooltip />
                    <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
                    <el-table-column label="标签" min-width="150">
                        <template #default="{ row }">
                            <el-tag
                                v-for="tag in row.tags"
                                :key="tag"
                                size="small"
                                class="tag-item">
                                {{ tag }}
                            </el-tag>
                            <span v-if="!row.tags || row.tags.length === 0" style="color: #909399;">无标签</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="version" label="版本" width="100" align="center">
                        <template #default="{ row }">
                            <el-tag type="info" size="small">v{{ row.version }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="创建时间" width="180" align="center">
                        <template #default="{ row }">
                            {{ formatDate(row.created_at) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="300" align="center" fixed="right">
                        <template #default="{ row }">
                            <el-space wrap>
                                <el-button size="small" type="primary" link @click="viewTemplateDetail(row)">
                                    查看
                                </el-button>
                                <el-button size="small" type="success" link @click="showVersionHistory(row)">
                                    版本历史
                                </el-button>
                                <el-button size="small" type="warning" link @click="showUpdateDialog(row)">
                                    编辑
                                </el-button>
                                <el-button size="small" type="info" link @click="instantiateFromTemplate(row)">
                                    创建工作流
                                </el-button>
                                <el-button size="small" type="danger" link @click="deleteTemplate(row)">
                                    删除
                                </el-button>
                            </el-space>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="margin-top: 20px; text-align: right;">
                    <el-pagination
                        v-model:current-page="pagination.page"
                        v-model:page-size="pagination.pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="total"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="loadTemplates"
                        @current-change="loadTemplates">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 创建/编辑模板对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogMode === 'create' ? '创建工作流模板' : '编辑工作流模板'"
            width="70%"
            :close-on-click-modal="false">
            <el-form :model="formData" label-width="120px">
                <el-form-item label="模板名称" required>
                    <el-input v-model="formData.name" placeholder="请输入模板名称" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input
                        v-model="formData.description"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入模板描述" />
                </el-form-item>
                <el-form-item label="标签">
                    <el-tag
                        v-for="tag in formData.tags"
                        :key="tag"
                        closable
                        @close="removeTag(tag)"
                        style="margin-right: 8px;">
                        {{ tag }}
                    </el-tag>
                    <el-input
                        v-if="tagInputVisible"
                        ref="tagInput"
                        v-model="tagInputValue"
                        size="small"
                        style="width: 100px;"
                        @keyup.enter="handleTagInputConfirm"
                        @blur="handleTagInputConfirm" />
                    <el-button v-else size="small" @click="showTagInput">+ 添加标签</el-button>
                </el-form-item>
                <el-form-item label="选择工作流" v-if="dialogMode === 'create'">
                    <el-select v-model="formData.workflow_id" placeholder="选择已有工作流创建模板" clearable style="width: 100%;">
                        <el-option
                            v-for="wf in workflows"
                            :key="wf.id"
                            :label="wf.name"
                            :value="wf.id">
                        </el-option>
                    </el-select>
                    <div style="color: #909399; font-size: 12px; margin-top: 5px;">
                        选择一个已有的工作流作为模板基础
                    </div>
                </el-form-item>
                <el-form-item label="修改说明" v-if="dialogMode === 'update'">
                    <el-input
                        v-model="formData.change_log"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入本次修改的说明" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitTemplate" :loading="submitting">
                    {{ dialogMode === 'create' ? '创建' : '更新' }}
                </el-button>
            </template>
        </el-dialog>

        <!-- 模板详情对话框 -->
        <el-dialog
            v-model="detailDialogVisible"
            title="工作流模板详情"
            width="80%">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="模板名称">{{ currentTemplate.name }}</el-descriptions-item>
                <el-descriptions-item label="版本">v{{ currentTemplate.version }}</el-descriptions-item>
                <el-descriptions-item label="描述" :span="2">{{ currentTemplate.description || '无' }}</el-descriptions-item>
                <el-descriptions-item label="标签" :span="2">
                    <el-tag
                        v-for="tag in currentTemplate.tags"
                        :key="tag"
                        size="small"
                        style="margin-right: 8px;">
                        {{ tag }}
                    </el-tag>
                    <span v-if="!currentTemplate.tags || currentTemplate.tags.length === 0">无标签</span>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ formatDate(currentTemplate.created_at) }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ formatDate(currentTemplate.updated_at) }}</el-descriptions-item>
                <el-descriptions-item label="创建人" :span="2">{{ currentTemplate.created_by || '未知' }}</el-descriptions-item>
            </el-descriptions>

            <el-divider />

            <h3>YAML 配置</h3>
            <el-input
                v-model="currentTemplate.yaml_content"
                type="textarea"
                :rows="15"
                class="yaml-editor"
                readonly />

            <template #footer>
                <el-button @click="detailDialogVisible = false">关闭</el-button>
            </template>
        </el-dialog>

        <!-- 版本历史对话框 -->
        <el-dialog
            v-model="versionDialogVisible"
            title="版本历史"
            width="80%">
            <el-row :gutter="20">
                <el-col :span="8">
                    <h4>版本列表</h4>
                    <div style="max-height: 400px; overflow-y: auto; border: 1px solid #dcdfe6; border-radius: 4px;">
                        <div
                            v-for="ver in versionHistory"
                            :key="ver.version"
                            :class="['version-item', { active: selectedVersion === ver.version }]"
                            @click="selectedVersion = ver.version">
                            <div style="font-weight: bold; color: #409EFF;">版本 {{ ver.version }}</div>
                            <div style="font-size: 12px; color: #909399; margin-top: 5px;">
                                {{ formatDate(ver.created_at) }}
                            </div>
                            <div v-if="ver.change_log" style="font-size: 12px; color: #606266; margin-top: 5px;">
                                {{ ver.change_log }}
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 15px;">
                        <el-button
                            type="primary"
                            size="small"
                            :disabled="!selectedVersion"
                            @click="rollbackToVersion">
                            回滚到选中版本
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="16">
                    <h4>版本对比</h4>
                    <el-row :gutter="10" style="margin-bottom: 15px;">
                        <el-col :span="12">
                            <el-select v-model="compareVersion1" placeholder="选择版本1" style="width: 100%;">
                                <el-option
                                    v-for="ver in versionHistory"
                                    :key="ver.version"
                                    :label="'版本 ' + ver.version"
                                    :value="ver.version">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            <el-select v-model="compareVersion2" placeholder="选择版本2" style="width: 100%;">
                                <el-option
                                    v-for="ver in versionHistory"
                                    :key="ver.version"
                                    :label="'版本 ' + ver.version"
                                    :value="ver.version">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-button
                        type="primary"
                        size="small"
                        :disabled="!compareVersion1 || !compareVersion2"
                        @click="compareVersions">
                        对比版本
                    </el-button>
                    <div v-if="versionDiff" style="margin-top: 15px;">
                        <div class="diff-container">{{ versionDiff }}</div>
                    </div>
                    <div v-else style="margin-top: 15px; color: #909399; text-align: center;">
                        请选择两个版本进行对比
                    </div>
                </el-col>
            </el-row>
            <template #footer>
                <el-button @click="versionDialogVisible = false">关闭</el-button>
            </template>
        </el-dialog>

        <!-- 从模板创建工作流对话框 -->
        <el-dialog
            v-model="instantiateDialogVisible"
            title="从模板创建工作流"
            width="50%">
            <el-form :model="instantiateForm" label-width="120px">
                <el-form-item label="工作流名称" required>
                    <el-input v-model="instantiateForm.name" placeholder="请输入工作流名称" />
                </el-form-item>
                <el-form-item label="参数配置">
                    <div v-if="templateParameters.length > 0">
                        <div v-for="param in templateParameters" :key="param.key" style="margin-bottom: 15px;">
                            <el-form-item :label="param.key" style="margin-bottom: 0;">
                                <el-input
                                    v-model="instantiateForm.param_values[param.key]"
                                    :placeholder="'默认值: ' + (param.default || '无')" />
                                <div style="color: #909399; font-size: 12px; margin-top: 3px;">
                                    {{ param.description || '无描述' }}
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div v-else style="color: #909399;">
                        该模板无参数配置
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="instantiateDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitInstantiate" :loading="instantiating">
                    创建工作流
                </el-button>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp, ref, reactive, onMounted, nextTick } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                const activeMenu = ref('workflow-templates');
                const loading = ref(false);
                const templates = ref([]);
                const total = ref(0);
                const pagination = reactive({
                    page: 1,
                    pageSize: 20
                });
                const searchQuery = reactive({
                    name: '',
                    tags: ''
                });

                // 对话框相关
                const dialogVisible = ref(false);
                const dialogMode = ref('create');  // 'create' | 'update'
                const detailDialogVisible = ref(false);
                const versionDialogVisible = ref(false);
                const instantiateDialogVisible = ref(false);
                const submitting = ref(false);
                const instantiating = ref(false);

                // 表单数据
                const formData = reactive({
                    name: '',
                    description: '',
                    workflow_id: null,
                    tags: [],
                    change_log: ''
                });

                // 标签输入
                const tagInputVisible = ref(false);
                const tagInputValue = ref('');
                const tagInput = ref(null);

                // 当前操作的模板
                const currentTemplate = ref({});
                const currentTemplateId = ref(null);

                // 工作流列表（用于创建模板时选择）
                const workflows = ref([]);

                // 版本历史相关
                const versionHistory = ref([]);
                const selectedVersion = ref(null);
                const compareVersion1 = ref(null);
                const compareVersion2 = ref(null);
                const versionDiff = ref('');

                // 模板实例化相关
                const instantiateForm = reactive({
                    name: '',
                    param_values: {}
                });
                const templateParameters = ref([]);

                // 加载模板列表
                const loadTemplates = async () => {
                    loading.value = true;
                    try {
                        const params = {
                            page: pagination.page,
                            page_size: pagination.pageSize
                        };
                        if (searchQuery.name) params.name = searchQuery.name;
                        if (searchQuery.tags) params.tags = searchQuery.tags;

                        const response = await axios.get('http://localhost:8000/api/workflow-templates', { params });
                        templates.value = response.data.items;
                        total.value = response.data.total;
                    } catch (error) {
                        ElMessage.error('加载模板列表失败: ' + (error.response?.data?.detail || error.message));
                    } finally {
                        loading.value = false;
                    }
                };

                // 加载工作流列表
                const loadWorkflows = async () => {
                    try {
                        const response = await axios.get('http://localhost:8000/api/workflows');
                        workflows.value = response.data.items || [];
                    } catch (error) {
                        console.error('加载工作流列表失败:', error);
                    }
                };

                // 显示创建对话框
                const showCreateDialog = () => {
                    dialogMode.value = 'create';
                    Object.assign(formData, {
                        name: '',
                        description: '',
                        workflow_id: null,
                        tags: [],
                        change_log: ''
                    });
                    loadWorkflows();
                    dialogVisible.value = true;
                };

                // 显示更新对话框
                const showUpdateDialog = (row) => {
                    dialogMode.value = 'update';
                    currentTemplateId.value = row.id;
                    Object.assign(formData, {
                        name: row.name,
                        description: row.description,
                        workflow_id: null,
                        tags: [...(row.tags || [])],
                        change_log: ''
                    });
                    dialogVisible.value = true;
                };

                // 提交模板
                const submitTemplate = async () => {
                    if (!formData.name) {
                        ElMessage.warning('请输入模板名称');
                        return;
                    }

                    if (dialogMode.value === 'create' && !formData.workflow_id) {
                        ElMessage.warning('请选择工作流');
                        return;
                    }

                    submitting.value = true;
                    try {
                        if (dialogMode.value === 'create') {
                            await axios.post('http://localhost:8000/api/workflow-templates', {
                                name: formData.name,
                                description: formData.description,
                                workflow_id: formData.workflow_id,
                                tags: formData.tags,
                                created_by: 'current_user'
                            });
                            ElMessage.success('创建模板成功');
                        } else {
                            await axios.put(`http://localhost:8000/api/workflow-templates/${currentTemplateId.value}`, {
                                name: formData.name,
                                description: formData.description,
                                tags: formData.tags,
                                change_log: formData.change_log
                            });
                            ElMessage.success('更新模板成功');
                        }
                        dialogVisible.value = false;
                        loadTemplates();
                    } catch (error) {
                        ElMessage.error((dialogMode.value === 'create' ? '创建' : '更新') + '模板失败: ' + (error.response?.data?.detail || error.message));
                    } finally {
                        submitting.value = false;
                    }
                };

                // 查看模板详情
                const viewTemplateDetail = async (row) => {
                    try {
                        const response = await axios.get(`http://localhost:8000/api/workflow-templates/${row.id}`);
                        currentTemplate.value = response.data;
                        detailDialogVisible.value = true;
                    } catch (error) {
                        ElMessage.error('加载模板详情失败: ' + (error.response?.data?.detail || error.message));
                    }
                };

                // 显示版本历史
                const showVersionHistory = async (row) => {
                    try {
                        const response = await axios.get(`http://localhost:8000/api/workflow-templates/${row.id}`);
                        currentTemplateId.value = row.id;
                        versionHistory.value = response.data.version_history || [];
                        selectedVersion.value = null;
                        compareVersion1.value = null;
                        compareVersion2.value = null;
                        versionDiff.value = '';
                        versionDialogVisible.value = true;
                    } catch (error) {
                        ElMessage.error('加载版本历史失败: ' + (error.response?.data?.detail || error.message));
                    }
                };

                // 对比版本
                const compareVersions = async () => {
                    if (!compareVersion1.value || !compareVersion2.value) {
                        ElMessage.warning('请选择两个版本');
                        return;
                    }

                    try {
                        const response = await axios.get(
                            `http://localhost:8000/api/workflow-templates/${currentTemplateId.value}/versions/diff`,
                            {
                                params: {
                                    version1: compareVersion1.value,
                                    version2: compareVersion2.value
                                }
                            }
                        );
                        versionDiff.value = response.data.diff || '两个版本内容相同';
                    } catch (error) {
                        ElMessage.error('版本对比失败: ' + (error.response?.data?.detail || error.message));
                    }
                };

                // 回滚版本
                const rollbackToVersion = async () => {
                    if (!selectedVersion.value) {
                        ElMessage.warning('请选择要回滚的版本');
                        return;
                    }

                    try {
                        await ElMessageBox.confirm(
                            `确定要回滚到版本 ${selectedVersion.value} 吗？这将创建一个新版本。`,
                            '确认回滚',
                            {
                                type: 'warning'
                            }
                        );

                        await axios.post(
                            `http://localhost:8000/api/workflow-templates/${currentTemplateId.value}/versions/${selectedVersion.value}/rollback`
                        );
                        ElMessage.success('版本回滚成功');
                        versionDialogVisible.value = false;
                        loadTemplates();
                    } catch (error) {
                        if (error !== 'cancel') {
                            ElMessage.error('版本回滚失败: ' + (error.response?.data?.detail || error.message));
                        }
                    }
                };

                // 从模板创建工作流
                const instantiateFromTemplate = async (row) => {
                    try {
                        const response = await axios.get(`http://localhost:8000/api/workflow-templates/${row.id}`);
                        currentTemplateId.value = row.id;
                        templateParameters.value = response.data.parameters || [];
                        instantiateForm.name = '';
                        instantiateForm.param_values = {};
                        // 设置默认值
                        templateParameters.value.forEach(param => {
                            if (param.default) {
                                instantiateForm.param_values[param.key] = param.default;
                            }
                        });
                        instantiateDialogVisible.value = true;
                    } catch (error) {
                        ElMessage.error('加载模板详情失败: ' + (error.response?.data?.detail || error.message));
                    }
                };

                // 提交实例化
                const submitInstantiate = async () => {
                    if (!instantiateForm.name) {
                        ElMessage.warning('请输入工作流名称');
                        return;
                    }

                    instantiating.value = true;
                    try {
                        const response = await axios.post(
                            `http://localhost:8000/api/workflow-templates/${currentTemplateId.value}/instantiate`,
                            {
                                name: instantiateForm.name,
                                param_values: instantiateForm.param_values,
                                created_by: 'current_user'
                            }
                        );
                        ElMessage.success('创建工作流成功！ID: ' + response.data.id);
                        instantiateDialogVisible.value = false;
                    } catch (error) {
                        ElMessage.error('创建工作流失败: ' + (error.response?.data?.detail || error.message));
                    } finally {
                        instantiating.value = false;
                    }
                };

                // 删除模板
                const deleteTemplate = async (row) => {
                    try {
                        await ElMessageBox.confirm(
                            `确定要删除模板 "${row.name}" 吗？`,
                            '确认删除',
                            {
                                type: 'warning'
                            }
                        );

                        await axios.delete(`http://localhost:8000/api/workflow-templates/${row.id}`);
                        ElMessage.success('删除成功');
                        loadTemplates();
                    } catch (error) {
                        if (error !== 'cancel') {
                            ElMessage.error('删除失败: ' + (error.response?.data?.detail || error.message));
                        }
                    }
                };

                // 标签相关
                const removeTag = (tag) => {
                    formData.tags = formData.tags.filter(t => t !== tag);
                };

                const showTagInput = () => {
                    tagInputVisible.value = true;
                    nextTick(() => {
                        tagInput.value?.focus();
                    });
                };

                const handleTagInputConfirm = () => {
                    if (tagInputValue.value && !formData.tags.includes(tagInputValue.value)) {
                        formData.tags.push(tagInputValue.value);
                    }
                    tagInputVisible.value = false;
                    tagInputValue.value = '';
                };

                // 格式化日期
                const formatDate = (dateStr) => {
                    if (!dateStr) return '';
                    const date = new Date(dateStr);
                    return date.toLocaleString('zh-CN');
                };

                // 重置搜索
                const resetAndLoad = () => {
                    searchQuery.name = '';
                    searchQuery.tags = '';
                    pagination.page = 1;
                    loadTemplates();
                };

                // 菜单切换
                const handleMenuSelect = (index) => {
                    if (index === 'templates') {
                        window.location.href = 'index.html';
                    } else if (index === 'workflows') {
                        window.location.href = 'workflow.html';
                    } else if (index === 'workflow-templates') {
                        // 当前页面
                    }
                };

                // 初始化
                onMounted(() => {
                    loadTemplates();
                });

                return {
                    activeMenu,
                    loading,
                    templates,
                    total,
                    pagination,
                    searchQuery,
                    dialogVisible,
                    dialogMode,
                    detailDialogVisible,
                    versionDialogVisible,
                    instantiateDialogVisible,
                    submitting,
                    instantiating,
                    formData,
                    tagInputVisible,
                    tagInputValue,
                    tagInput,
                    currentTemplate,
                    currentTemplateId,
                    workflows,
                    versionHistory,
                    selectedVersion,
                    compareVersion1,
                    compareVersion2,
                    versionDiff,
                    instantiateForm,
                    templateParameters,
                    loadTemplates,
                    showCreateDialog,
                    showUpdateDialog,
                    submitTemplate,
                    viewTemplateDetail,
                    showVersionHistory,
                    compareVersions,
                    rollbackToVersion,
                    instantiateFromTemplate,
                    submitInstantiate,
                    deleteTemplate,
                    removeTag,
                    showTagInput,
                    handleTagInputConfirm,
                    formatDate,
                    resetAndLoad,
                    handleMenuSelect
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>
